﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
   <script src="../../scripts/angular.min.js"></script>
    <script src="../../scripts/angular-ui-router.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
  <script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-resource.js"></script>
      <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        angular.module('jqxgrid.error', ['ngResource', 'ui.router', 'jqwidgets']).config(configDetails);
        function configDetails($stateProvider) {

            $stateProvider.state('ng1', {
                url: '/jqwidget/ng1',
                template: '<div name="first page" ng-controller="jqxgridErrorController"><jqx-grid id="grid1" jqx-create="createWidget" jqx-settings="gridSettings" jqx-alt-rows="true" ></jqx-grid></div>'
                //controller: jqxgridErrorController
            }).state('ng2', {
                url: '/jqwidget/ng2',
                template: '<div name="second page" ng-controller="jqxgridErrorController"><jqx-grid id="grid2" jqx-create="createWidget" jqx-settings="gridSettings" jqx-alt-rows="true" ></jqx-grid></div>'
                //controller: jqxgridErrorController
            });
        }
        angular
            .module('jqxgrid.error')
            .controller('jqxgridErrorController', jqxgridErrorController);

        function jqxgridErrorController($scope) {

            var generatedata = function (startindex, endindex) {
                var data = [];
                for (var i = startindex; i < endindex; i++) {
                    var row = {};
                    row["data1"] = 1;
                    row["data2"] = 'Joe';
                    row["data3"] = '123';
                    row["data4"] = 5;
                    row["data5"] = 'Smith';
                    row["data6"] = '789';
                    row["data7"] = 'USA';


                    data[i] = row;
                }
                return data;

            };
            var source =
            {
                datatype: 'array',
                localdata: {},
                //id: 'customerNumber',
                datafields: [
                    { name: 'data1' },
                    { name: 'data2' },
                    { name: 'data3' },
                    { name: 'data4' },
                    { name: 'data5' },
                    { name: 'data6' },
                    { name: 'data7' }
                ]
            };

            source.localdata = generatedata(0, 100);
            var dataAdapter = new $.jqx.dataAdapter(source);
            $scope.gridSettings =
            {
                
                source: dataAdapter,
                altrows: true,  // alternating row styling
                virtualmode: true,
                theme: 'energyblue',
                rendergridrows: function () {
                    //return obj.data;
                    //var data = generatedata(params.startindex, params.endindex);
                    var data = generatedata(0, 100);
                    return data;
                },
                sortable: false,

                columns: [
                    { text: 'col 1', datafield: 'data1', width: 50, cellsalign: 'right' },
                    { text: 'col 2', datafield: 'data2', minwidth: 120 },
                    { text: 'col 3', datafield: 'data3', width: 120 },
                    { text: 'col 4', datafield: 'data4', cellsalign: 'right', width: 50 },
                    { text: 'col 5', datafield: 'data5', width: 130 },
                    { text: 'col 6', datafield: 'data6', width: 130 },
                    { text: 'col 7', datafield: 'data7', width: 150 }
                ]
            };

            activate();

            function activate() {
                $scope.createWidget = true;
            }

        }

    </script>
</head>
<body>
    <div ng-app="jqxgrid.error">
        <div>
            <div ui-view>
                <div ng-controller="jqxgridErrorController">
                    <jqx-grid id="grid1" jqx-create="createWidget"  jqx-settings="gridSettings" jqx-alt-rows="true">
         </jqx-grid>
                </div>
            </div>
        </div>
        <br />
        <a href="#/jqwidget/ng1">page 1</a>
        <a href="#/jqwidget/ng2">page 2</a>
    </div>
</body>
</html>
